<template>
 <div class="carousel pd_40">
   <div class="fse">
     <div class="w60">
       <el-row :gutter="40">
      <el-col :span="12">
        <div class="fsc">
          <span class="articlelist_lable">展示位置</span>
          <el-select v-model="value" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="fsc">
          <span class="articlelist_lable">使用状态</span>
          <el-select v-model="value" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
     </el-row>


     <el-row v-show="isOpeni" class="mg_t20" :gutter="40">
      <el-col :span="12">
        <div class="fsc">
          <span class="articlelist_lable">播放时段</span>
          <el-date-picker
            v-model="value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="fsc">
          <span class="articlelist_lable">上次调整时间</span>
          <el-date-picker
            v-model="value"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
     </el-row>
     </div>
     
     <div class="fsc">
      <el-button type="primary">搜索</el-button>
      <el-button >重置</el-button>
      <p @click="isOpeni=!isOpeni" class="mg_l10">
        <span class="c_blue f_14">展开</span>
        <i v-show="!isOpeni" class="advert_i el-icon-arrow-down"></i>
        <i v-show="isOpeni" class="advert_i el-icon-arrow-up"></i>
      </p>
     </div>
     
   </div>
   <p class="articlelist_query fsc">
      <el-button type="primary" @click="newlyBuild(false)">新建+</el-button>
    </p>
   <div>
     <el-table
      ref="filterTable"
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        width="150"
        label="参数ID">
      </el-table-column>
      <el-table-column
        prop="name"
        width="150"
        label="投放位置">
      </el-table-column>
      <el-table-column
        width="180"
        prop="address"
        align="center"
        label="banner图片">
        <template slot-scope="scope">
          <div>
            <img class="say_list_img" src="@/assets/logo.png" alt="做客">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        type="index"
        align="center"
        label="排序">
      </el-table-column>
      <el-table-column
        width="150"
        label="链接地址">
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        label="播放时段">
        <template slot-scope="scope">
          <div>
            <p><span>2018-1-1</span><span>12:23</span></p>
            <p>至</p>
            <p><span>2018-1-1</span><span>12:23</span></p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        label="上次调制时间">
        <template slot-scope="scope">
          <div>
            <p>2018-1-1</p>
            <p>12:23</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        column-key="date"
        :filters="[{text: '播放中', value: '0'}, {text: '带播放', value: '1'}, {text: '已结束', value: '2'}, {text: '已下架', value: '3'}]"
        :filter-method="filterHandler"
        prop="address"
        width="150"
        label="使用状态">
      </el-table-column>
      <el-table-column
        width="150"
        label="备注">
      </el-table-column>
      <el-table-column
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <div class="nowrap">
            <el-button @click="newlyBuild(scope)" type="primary" size="mini">修改</el-button>
            <el-button @click="LowerShelf" type="primary" size="mini">下架</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>
  </div>

  <!--新建alert-->
  <el-dialog
    :title="isNow?'新建广告':'修改广告'"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <div class="f_13 mg_r20">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="seat">
          <el-select v-model="form.seat" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="array">
          <el-input placeholder="请输入排序" v-model="form.array"></el-input>
        </el-form-item>
        <el-form-item label="链接地址" prop="src">
          <el-input placeholder="请输入排序" v-model="form.src"></el-input>
        </el-form-item>
        <el-form-item label="播放时段" prop="time">
          <el-date-picker
            v-model="form.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注信息" prop="remarks">
          <el-input type="textarea" v-model="form.remarks"></el-input>
        </el-form-item>
        
        <el-form-item label="上传图片">
          <el-upload
            :limit="1"
            :on-success="onSuccess"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary"  @click="submitForm('form')">确定</el-button>
      <el-button @click="resetForm('form')">取消</el-button>
    </span>
  </el-dialog>

  <!--alert-->
  <el-dialog
    title="更多用户信息"
    :visible.sync="moreUsermaAlert"
    width="30%"
    center>
    <div class="fbc fwrap f_13">
      
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="moreUsermaAlert=false;">关闭</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      isNow: true,       //判断新增或修改
      isOpeni: false,   //展开搜索栏
      imgUrl: [],      //成功上传后的图片
      form: {            //新建dialog表单
        seat: '',
        array: '',
        src: '',
        time: '',
        remarks: ''
      },
      rules: {
        seat: [{ required: true, message: '请选择展示位置', trigger: 'change'}],
        array: [{ required: true, message: '请输入排序', trigger: 'blur'}],
        time: [{ required: true, message: '请选择播放时段', trigger: 'change'}],
      },
      value: '',
      currentPage4: 4,
      centerDialogVisible: false,
      moreUsermaAlert: false,
      dialogImageUrl: '',
      dialogVisible: false,
      options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '等待审核'
        }, {
          value: '选项3',
          label: '审核通过'
        }, {
          value: '选项4',
          label: '驳回修改'
        }, {
          value: '选项5',
          label: '已下架'
        }],
        
        
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区 弄'
        }]
    }
  },
  mounted () {
    console.log('123456')
  },
  methods: {
   newlyBuild(scope) {       //点击新增/修改
      if(scope===false) {
        this.isNow = true;
        this.centerDialogVisible = true;
      }else{
        this.isNow = false ;
        this.centerDialogVisible = true;
      }
   },
   resetForm(formName) {
      this.$refs[formName].resetFields();
   },
   submitForm(formName) {         //新增确定
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.imgUrl.length>0) {

            //请求接口
            this.centerDialogVisible = false;
            this.$message({
              type: 'success',
              message: '上传成功'
            })
          }else {
            this.$message.error('请上传图案片')
          }
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    LowerShelf() {
       this.$confirm('是否确定下架', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
    },
    onSuccess(response, file, fileList) {   //上传图片成功钩子
      //  console.log(response, file, fileList);
       this.imgUrl.push(file.url)
    },
    handleRemove(file, fileList) {      //移除图片的钩子
      console.log(file, fileList);
      this.imgUrl.splice(this.imgUrl.indexOf(file.url),1)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
  },
  
}
</script>
<style scoped lang="less">

  .advert_i {
    color: #409EFF;
    margin-top: 3px;
    margin-left: 4px;
  }
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
  .say_list_img {
    width: 100px;
    height: 50px;
  }
</style>

